<template>
  <div style="padding: 20px 0;">
    <el-button style="margin: 0 15px;background-color: #f3abab;" @click="addorder(row),addialog = true">添加</el-button>
    <el-input v-model='id' placeholder="请输入商品id" style="width: 200px;">{{scope.row.id}}</el-input>
    <el-button style="margin: 0 15px;background-color: #f3abab;" @click="selectDataorder(row)">查询</el-button>
    <el-button style="margin: 0 15px;background-color: #f3abab;" @click="reset(row)">重置</el-button>
  </div>
  <div>
    <el-table :data="data.tableData" style="width: 100%">
      <el-table-column label="系统订单号" width="180" disabled>
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span style="margin-left: 10px">{{ scope.row.id }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="商品名称" width="150">
        <template #default="scope">
          <el-popover effect="light" trigger="hover" placement="top" width="auto">
            <template #default>
              <div>name: {{ scope.row.name }}</div>
              <div>address: {{ scope.row.address }}</div>
            </template>
            <template #reference>
              <el-tag>{{ scope.row.name }}</el-tag>
            </template>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="商品图片" width="120">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span style="margin-left: 10px">{{ scope.row.img }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="商品标题" width="140">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span style="margin-left: 10px">{{ scope.row.title }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="实付金额" width="100">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span style="margin-left: 10px">${{ scope.row.money }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="预估收益" width="100">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span style="margin-left: 10px">${{ scope.row.profit }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row),editdialog = true">编辑</el-button>
          <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <!-- 添加 -->
  <el-dialog v-model="addialog" title="添加订单信息">
    <el-form :model="form">
      <el-form-item label=" 系统订单号" :label-width="formLabelWidth">
        <el-input v-model="form.id" autocomplete="off" />
      </el-form-item>
      <el-form-item label="买家id/名称" :label-width="formLabelWidth">
        <el-input v-model="form.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="商品图片" :label-width="formLabelWidth">
        <el-input v-model="form.img" autocomplete="off" />
      </el-form-item>
      <el-form-item label="商品标题" :label-width="formLabelWidth">
        <el-input v-model="form.title" autocomplete="off" />
      </el-form-item>
      <el-form-item label="实付金额" :label-width="formLabelWidth">
        <el-input v-model="form.money" autocomplete="off" />
      </el-form-item>
      <el-form-item label="预估收益" :label-width="formLabelWidth">
        <el-input v-model="form.profit" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="addialog = false">取消</el-button>
        <el-button type="primary" @click="addialog = false">确定</el-button>
      </span>
    </template>
    <!-- 编辑 -->
  </el-dialog>
  <el-dialog v-model="editdialog" title="编辑">
    <el-form :model="form">
      <el-form-item label="系统订单号" :label-width="formLabelWidth">
        <el-input v-model="form.id" autocomplete="off" />
      </el-form-item>
      <el-form-item label="买家id/名称" :label-width="formLabelWidth">
        <el-input v-model="form.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="商品图片" :label-width="formLabelWidth">
        <!-- <el-input v-model="form.img" autocomplete="off" /> -->
          <div class="uploadBox">
            <!-- 上传商品图片 -->
        <el-upload class="avatar-uploader" action="/api/upload1"  name="aaa"
        :show-file-list="false"
            :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon">
                <Plus />
            </el-icon>
        </el-upload>
    </div>
      </el-form-item>
      <el-form-item label="商品标题" :label-width="formLabelWidth">
        <el-input v-model="form.title" autocomplete="off" />
      </el-form-item>
      <el-form-item label="实付金额" :label-width="formLabelWidth">
        <el-input v-model="form.money" autocomplete="off" />
      </el-form-item>
      <el-form-item label="预估收益" :label-width="formLabelWidth">
        <el-input v-model="form.profit" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="editdialog = false">取消</el-button>
        <el-button type="primary" @click="editdialog = false">确定</el-button>
      </span>
    </template>
  </el-dialog>

  <div class="fenye" style="padding:20px 0">
    <el-pagination background layout="prev, pager, next" :page-size="5" :total="100" default-current-page="1" />
  </div>

  <edit-order></edit-order>
</template>

<script setup>
  import { getData,delData } from '../until/aaa.js'
  import { Timer, Plus } from '@element-plus/icons-vue'
  import { ElMessage, ElMessageBox,ElUpload,ElIcon,ElButton} from 'element-plus'
  import { reactive, ref } from 'vue'
  import editOrder from './myorder/editOrder.vue'

const imageUrl = ref('')
  const editdialog = ref(false)
  const addialog = ref(false)
  const formLabelWidth = '140px'

 const data =reactive({
     tableData:[]
    
 })
const input=ref({
id:''
})
  // 查询数据
  function selectData() {
    getData().then((value) => {
      console.log(value);
      data.tableData = value.data.data
    })
  }
  selectData()
  //编辑
  const handleEdit = (index, row) => {
    console.log(index, row)
    // 回显编辑订单
    form.id = row.id
    form.name = row.name
    form.address = row.address
    form.img = row.img
    form.title = row.title
    form.money = row.money
    form.profit = row.money
  }
  // 删除
  const handleDelete = (index, row) => {
    console.log(index, row)
    // // 发送请求
    // ElMessageBox.confirm("你确定删除这个学生的信息吗?", "提示", {
    //   confirmButtonText: "确认",
    //   cancelButtonText: "取消",
    //   type: "warning",
    // })
    delData().then((value)=>{
       data.tableData.id=row.id
      console.log(value);
    })
  }
  // 添加
  const addorder = () => {
    // 发送请求
  }
  // 查询
  const selectDataorder = () => {
    // tableData.dialogShow = true;
    // tableData.rowInfo = val;
  }

  const newfrom = reactive({
    id: '',
    name: '',
    address: '',
    img: '',
    title: '',
    money: '',
    profit: ''
  })
  const form = reactive({
    id: '',
    name: '',
    address: '',
    img: '',
    title: '',
    money: '',
    profit: ''
  })
  // 上传文件限制
  const handleAvatarSuccess= (response,uploadFile) => {
    console.log(response,uploadFile)
    imageUrl.value = '/api/uploads/'+response.path;
}
const beforeAvatarUpload= (rawFile) => {
  if (rawFile.type !== 'image/png') {
    ElMessage.error('Avatar picture must be png format!')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('Avatar picture size can not exceed 2MB!')
    return false
  }
  return true
}
</script>
<style lang="less" scoped>
  .fenye {
    display: flex;
    justify-content: center;
  }
  .avatar-uploader .avatar {
  width: 80px;
  height: 80px;
  display: block;
}
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color:#8c939d;                                                                                    
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>